<script setup lang="ts">
// Vue3 + TypeScript + Router + Pinia + Element Plus Demo
</script>

<template>
  <div id="app" class="min-h-screen bg-gray-50">
    <header class="border-b bg-white shadow-sm">
      <div class="mx-auto max-w-7xl px-4 sm:px-6 lg:px-8">
        <div class="flex items-center justify-between py-4">
          <div class="flex items-center space-x-4">
            <img src="/vite.svg" class="h-8 w-8" alt="Vite logo" />
            <img src="./assets/vue.svg" class="h-8 w-8" alt="Vue logo" />
            <h1 class="text-xl font-semibold text-gray-900">Vue3 Demo</h1>
          </div>
          <nav class="flex space-x-4">
            <router-link to="/" class="rounded-md px-3 py-2 text-sm font-medium text-gray-600 hover:text-gray-900"> 首页 </router-link>
          </nav>
        </div>
      </div>
    </header>

    <main class="mx-auto max-w-7xl py-6 sm:px-6 lg:px-8">
      <router-view />
    </main>
  </div>
</template>

<style scoped>
.router-link-active {
  @apply bg-blue-50 text-blue-600;
}
</style>
